import React, { useEffect } from 'react';
import { Button, Table, Tag } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Column } = Table;

interface DataType {
  prodName: string;
  prodCount: string;
  price: number;
  orderNumber:string,
  actualTotal:number,
  status:number,
  tags?: string[];
}

interface SearchtableProps {
  dataSource: DataType[];
  onPageChange: (page: number, pageSize?: number) => void;
}

export const Searchtable: React.FC<SearchtableProps> = ({ dataSource, onPageChange }) => {
  const navigate = useNavigate();

  const skinRecorfs = (orderId: string, newStatus: string) => {
    navigate('/user/skinRecords');
    // Add your logic to handle status change here
    console.log(`Changing status of order ${orderId} to ${newStatus}`);
  };

  return (
    <Table dataSource={dataSource} onChange={(pagination) => onPageChange(pagination.current || 1, pagination.pageSize)}>
      <Column title="用户名称" dataIndex="prodName" key="prodName" />
      <Column title="用户手机号" dataIndex="prodCount" key="prodCount" />
      <Column title="注册时间" dataIndex="price" key="price" />

      <Column
        title="操作"
        dataIndex="tags"
        key="tags"
        render={(tags, record: any) => (
          <div className="space-x-4">
            <Button type="primary" onClick={() => skinRecorfs(record, 'newStatus')}>
              查看用户信息
            </Button>

            <Button type="primary" onClick={() => skinRecorfs(record, 'newStatus')}>
              查看测肤记录
            </Button>
          </div>
        )}
      />
    </Table>
  );
};
